<div id="doc-title-side-div" class="bbd-panel">
    <h3 class="bbd-panel-title" style="font-weight: bold">推荐阅读</h3>
    <div class="bbd-panel-main">
        {% for article in articles %}
            <div class="side-recommend">
                <a href="{% url 'article-detail-view' article.id %}" target="_blank">
                    <h4>
                        {% if article.top %}
                            <span class="layui-badge-rim" style="color: #FF5722"> 推荐 </span>
                        {% endif %}
                        <span>{{ article.title }}
                        </span>
                    </h4>
                </a>

            </div>
        {% endfor %}
    </div>
</div>
<style>
    .side-recommend {
        height: 40px;
        border-bottom: 2px #fafafa dotted;
    }

    .side-recommend:hover {
        background: #fafafa;
    }
</style>